<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css图片拼合</title>
    <style type="text/css">
    #navlist {
        position: relative;
    }
    
    #navlist li {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
    }
    
    #navlist li,
    #navlist a {
        height: 44px;
        display: block;
    }
    
    #home {
        left: 0px;
        width: 46px;
    }
    
    #home {
        background: url('img/img_navsprites_hover.gif') 0 0;
    }
    
    #home a:hover {
        background: url('img/img_navsprites_hover.gif') 0 -45px;
    }
    
    #prev {
        left: 63px;
        width: 43px;
    }
    
    #prev {
        background: url('img/img_navsprites_hover.gif') -47px 0;
    }
    
    #prev a:hover {
        background: url('img/img_navsprites_hover.gif') -47px -45px;
    }
    
    #next {
        left: 129px;
        width: 43px;
    }
    
    #next {
        background: url('img/img_navsprites_hover.gif') -91px 0;
    }
    
    #next a:hover {
        background: url('img/img_navsprites_hover.gif') -91px -45px;
    }
    </style>
</head>

<body>
    <ul id="navlist">
        <li id="home">
            <a href="default.asp"></a>
        </li>
        <li id="prev">
            <a href="css_intro.asp"></a>
        </li>
        <li id="next">
            <a href="css_syntax.asp"></a>
        </li>
    </ul>
</body>

</html>
